<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>豆瓣App-书影音</title>
    <link rel="shortcut icon" href="https://img3.doubanio.com/favicon.ico">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./img/icon/font_iconfont/iconfont.css">
    <link rel="stylesheet" href="./lib/swiper-bundle.min.css">
    <link rel="stylesheet" href="./css/app-public.css">
    <link rel="stylesheet" href="./css/app-movie-public.css">
    <link rel="stylesheet" href="./css/app-movie.css">
</head>
<body>
    <div class="mobile">
        <header>
            <div class="functional_domain flexBox">
                <span class="showMore iconfont">&#xe66d;</span>
                <div class="searchBar flexBox">
                    <span class="iconfont">&#xe8d6;</span>
                    <span class="placeholder">你镜头里的留白美</span>
                </div>
                <span class="showMessage iconfont">&#xe65e;</span>
            </div>
            <div class="module_switch flexBox">
                <a href="javascript:void(0);" class="current" data-index="1">电影</a>
                <a href="javascript:void(0);" data-index="2">电视</a>
                <a href="javascript:void(0);" data-index="3">读书</a>
                <a href="javascript:void(0);" data-index="4">连载</a>
                <a href="javascript:void(0);" data-index="5">音乐</a>
                <a href="javascript:void(0);" data-index="6">同城</a>
                <span class="afterSlider"></span>
            </div>
        </header>
        
        <aside>
            <div class="main">
                <div class="hd flexBox">
                    <span class="iconfont close">&#xe600;</span>
                    <span class="iconfont">&#xe60e;</span>
                </div>
                <div class="mid">
                    <div class="user flexBox">
                        <div class="avatar"><img src="./img/avatar.jpg" alt=""></div>
                        <span class="username">未登录</span>
                    </div>
                    <div class="userFuncArea">
                        <div class="top">
                            <div class="item flexBox">
                                <span class="iconfont">&#xe70f;</span>
                                <span class="text">我的收藏/豆列</span>
                                <span class="rightText">我的豆列在这里</span>
                            </div>
                            <div class="item flexBox">
                                <span class="iconfont">&#xe609;</span>
                                <span class="text">我的关注</span>
                            </div>
                            <div class="item flexBox">
                                <span class="iconfont">&#xe638;</span>
                                <span class="text">我的浏览</span>
                            </div>
                        </div>
                        <div class="bottom">
                            <div class="item flexBox">
                                <span class="iconfont">&#xe621;</span>
                                <span class="text">青少年模式</span>
                            </div>
                            <div class="item flexBox">
                                <span class="iconfont">&#xe621;</span>
                                <span class="text">设置</span>
                            </div>
                            <div class="item flexBox">
                                <span class="iconfont">&#xe624;</span>
                                <span class="text">帮助与反馈</span>
                            </div>
                            <div class="item flexBox">
                                <span class="iconfont">&#xf706;</span>
                                <span class="text">社区管理中心</span>
                            </div>
                            <div class="item flexBox logOut">
                                <span class="iconfont">&#xe621;</span>
                                <span class="text">退出登录</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="bd">
                    <div class="topFuncArea flexBox">
                        <div class="item flexBox">
                            <span class="iconfont order"></span>
                            <span class="text">订单</span>
                        </div>
                        <div class="item flexBox">
                            <span class="iconfont cart"></span>
                            <span class="text">购物车(2)</span>
                        </div>
                        <div class="item flexBox">
                            <span class="iconfont wallet"></span>
                            <span class="text">钱包</span>
                        </div>
                        <div class="item flexBox">
                            <span class="iconfont db_time"></span>
                            <span class="text">豆瓣时间</span>
                        </div>
                        <div class="item flexBox">
                            <span class="iconfont db_bookshelf"></span>
                            <span class="text">豆瓣阅读书架</span>
                        </div>
                    </div>
                    <div class="license">
                        <img src="./img/副页-license.png" alt="">
                        <span>证照信息<span class="iconfont">&#xe6a3;</span></span>
                    </div>
                </div>
            </div>
            <div class="mask"></div>
        </aside>

        <main>
            <section class="head flexBox">
                <a href="javascript:void(0);" class="db_movie_find flexBox">找电影</a>
                <a href="javascript:void(0);" class="db_movie_list flexBox">豆瓣榜单</a>
                <a href="javascript:void(0);" class="db_movie_coming flexBox">即将上映</a>
                <a href="javascript:void(0);" class="db_movie_sheet flexBox">豆瓣片单</a>
            </section>

            <section class="recommend">
                <h2 class="hd flexBox">
                    <div class="module flexBox">
                        <span class="current MovieCinemaHit" data-index="1">影院热映</span>
                        <span class="movieDouBanHot" data-index="2">豆瓣热门</span>
                    </div>
                    <a href="javascript:void(0);" class="more">
                        <span>全部</span>
                        <span class="iconfont">&#xe6a3;</span>
                    </a>
                </h2>
                <div class="bd"></div>
            </section>

            <section class="sheet flexBox">
                <a href="javascript:void(0);" class="flexBox">
                    <div class="main flexBox">
                        <div class="top flexBox">
                            <span>国内即将上映</span>
                            <span class="iconfont">&#xe6a3;</span>
                        </div>
                        <div class="bottom flexBox">
                            <div class="text">近期有10部<br>热门新剧</div>
                            <div class="movie_sheet">
                                <div class="sheet_img"></div>
                                <div class="sheet_img"></div>
                                <div class="sheet_img"></div>
                            </div>
                        </div>
                    </div>
                </a>
                <a href="javascript:void(0);" class="flexBox">
                    <div class="main flexBox">
                        <div class="top flexBox">
                            <span>全球值的期待</span>
                            <span class="iconfont">&#xe6a3;</span>
                        </div>
                        <div class="bottom flexBox">
                            <div class="text">近期有9部<br>热门新剧</div>
                            <div class="movie_sheet">
                                <div class="sheet_img"></div>
                                <div class="sheet_img"></div>
                                <div class="sheet_img"></div>
                            </div>
                        </div>
                    </div>
                </a>
            </section>

            <section class="ad">
                <div class="main"></div>
            </section>

            <div class="sheet sheet_second flexBox">
                <div class="main">
                    <div class="container">
                        <div class="item flexBox">
                            <div class="hd flexBox">
                                <div>实时热门电影</div>
                                <span>豆瓣榜单</span>
                            </div>
                            <div class="bd flexBox">
                                <div class="movie flexBox">
                                    <div class="order_number">1</div>
                                    <div class="poster"><img src="https://images.weserv.nl/?url=https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2881176356.webp" alt=""></div>
                                    <div class="info">
                                        <div class="name">万里归途</div>
                                        <div class="rating flexBox">
                                            <span class="rating_stars small flexBox" data-rating="4.0">
                                                <span class="rating_stars_item rating_stars_item_full small"></span>
                                                <span class="rating_stars_item rating_stars_item_full small"></span>
                                                <span class="rating_stars_item rating_stars_item_full small"></span>
                                                <span class="rating_stars_item rating_stars_item_full small"></span>
                                                <span class="rating_stars_item rating_stars_item_gray small"></span>
                                            </span>
                                            <span class="rating_num">7.5</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="movie flexBox">
                                    <div class="order_number">2</div>
                                    <div class="poster"><img src="https://images.weserv.nl/?url=https://img2.doubanio.com/view/photo/s_ratio_poster/public/p2873950053.jpg" alt=""></div>
                                    <div class="info">
                                        <div class="name">子弹列车</div>
                                        <div class="rating flexBox">
                                            <span class="rating_stars small flexBox" data-rating="4.0">
                                                <span class="rating_stars_item rating_stars_item_full small"></span>
                                                <span class="rating_stars_item rating_stars_item_full small"></span>
                                                <span class="rating_stars_item rating_stars_item_full small"></span>
                                                <span class="rating_stars_item rating_stars_item_full small"></span>
                                                <span class="rating_stars_item rating_stars_item_gray small"></span>
                                            </span>
                                            <span class="rating_num">7.9</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="movie flexBox">
                                    <div class="order_number">3</div>
                                    <div class="poster"><img src="https://images.weserv.nl/?url=https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2875472104.jpg" alt=""></div>
                                    <div class="info">
                                        <div class="name">狩猎</div>
                                        <div class="rating flexBox">
                                            <span class="rating_stars small flexBox" data-rating="4.0">
                                                <span class="rating_stars_item rating_stars_item_full small"></span>
                                                <span class="rating_stars_item rating_stars_item_full small"></span>
                                                <span class="rating_stars_item rating_stars_item_full small"></span>
                                                <span class="rating_stars_item rating_stars_item_full small"></span>
                                                <span class="rating_stars_item rating_stars_item_gray small"></span>
                                            </span>
                                            <span class="rating_num">7.5</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="item flexBox">
                            <div class="hd flexBox">
                                <div>一周口碑电影榜</div>
                                <span>豆瓣榜单</span>
                            </div>
                            <div class="bd flexBox">
                                <div class="movie flexBox">
                                    <div class="order_number">1</div>
                                    <div class="poster"><img src="https://images.weserv.nl/?url=https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2708190250.jpg" alt=""></div>
                                    <div class="info">
                                        <div class="name">咒术回战 0 剧场版</div>
                                        <div class="rating flexBox">
                                            <span class="rating_stars small flexBox" data-rating="4.0">
                                                <span class="rating_stars_item rating_stars_item_full small"></span>
                                                <span class="rating_stars_item rating_stars_item_full small"></span>
                                                <span class="rating_stars_item rating_stars_item_full small"></span>
                                                <span class="rating_stars_item rating_stars_item_full small"></span>
                                                <span class="rating_stars_item rating_stars_item_gray small"></span>
                                            </span>
                                            <span class="rating_num">8.2</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="movie flexBox">
                                    <div class="order_number">2</div>
                                    <div class="poster"><img src="https://images.weserv.nl/?url=https://img2.doubanio.com/view/photo/s_ratio_poster/public/p2873950053.jpg" alt=""></div>
                                    <div class="info">
                                        <div class="name">子弹列车</div>
                                        <div class="rating flexBox">
                                            <span class="rating_stars small flexBox" data-rating="4.0">
                                                <span class="rating_stars_item rating_stars_item_full small"></span>
                                                <span class="rating_stars_item rating_stars_item_full small"></span>
                                                <span class="rating_stars_item rating_stars_item_full small"></span>
                                                <span class="rating_stars_item rating_stars_item_full small"></span>
                                                <span class="rating_stars_item rating_stars_item_gray small"></span>
                                            </span>
                                            <span class="rating_num">7.9</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="movie flexBox">
                                    <div class="order_number">3</div>
                                    <div class="poster"><img src="https://images.weserv.nl/?url=https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2868008846.jpg" alt=""></div>
                                    <div class="info">
                                        <div class="name">一场很（没）有必要的春晚</div>
                                        <div class="rating flexBox">
                                            <span class="rating_stars small flexBox" data-rating="4.0">
                                                <span class="rating_stars_item rating_stars_item_full small"></span>
                                                <span class="rating_stars_item rating_stars_item_full small"></span>
                                                <span class="rating_stars_item rating_stars_item_full small"></span>
                                                <span class="rating_stars_item rating_stars_item_full small"></span>
                                                <span class="rating_stars_item rating_stars_item_gray small"></span>
                                            </span>
                                            <span class="rating_num">7.8</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="item flexBox">
                            <div class="hd flexBox">
                                <div>豆瓣电影&nbsp;Top250</div>
                                <span>豆瓣榜单</span>
                            </div>
                            <div class="bd flexBox">
                                <div class="movie flexBox">
                                    <div class="order_number">1</div>
                                    <div class="poster"><img src="https://images.weserv.nl/?url=https://img2.doubanio.com/view/photo/s_ratio_poster/public/p480747492.webp" alt=""></div>
                                    <div class="info">
                                        <div class="name">肖申克的救赎</div>
                                        <div class="rating flexBox">
                                            <span class="rating_stars small flexBox" data-rating="5.0">
                                                <span class="rating_stars_item rating_stars_item_full small"></span>
                                                <span class="rating_stars_item rating_stars_item_full small"></span>
                                                <span class="rating_stars_item rating_stars_item_full small"></span>
                                                <span class="rating_stars_item rating_stars_item_full small"></span>
                                                <span class="rating_stars_item rating_stars_item_full small"></span>
                                            </span>
                                            <span class="rating_num">9.7</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="movie flexBox">
                                    <div class="order_number">2</div>
                                    <div class="poster"><img src="https://images.weserv.nl/?url=https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2561716440.webp" alt=""></div>
                                    <div class="info">
                                        <div class="name">霸王别姬</div>
                                        <div class="rating flexBox">
                                            <span class="rating_stars small flexBox" data-rating="5.0">
                                                <span class="rating_stars_item rating_stars_item_full small"></span>
                                                <span class="rating_stars_item rating_stars_item_full small"></span>
                                                <span class="rating_stars_item rating_stars_item_full small"></span>
                                                <span class="rating_stars_item rating_stars_item_full small"></span>
                                                <span class="rating_stars_item rating_stars_item_full small"></span>
                                            </span>
                                            <span class="rating_num">9.6</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="movie flexBox">
                                    <div class="order_number">3</div>
                                    <div class="poster"><img src="https://images.weserv.nl/?url=https://img2.doubanio.com/view/photo/s_ratio_poster/public/p2372307693.webp" alt=""></div>
                                    <div class="info">
                                        <div class="name">阿甘正传</div>
                                        <div class="rating flexBox">
                                            <span class="rating_stars small flexBox" data-rating="5.0">
                                                <span class="rating_stars_item rating_stars_item_full small"></span>
                                                <span class="rating_stars_item rating_stars_item_full small"></span>
                                                <span class="rating_stars_item rating_stars_item_full small"></span>
                                                <span class="rating_stars_item rating_stars_item_full small"></span>
                                                <span class="rating_stars_item rating_stars_item_full small"></span>
                                            </span>
                                            <span class="rating_num">9.5</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="more">
                            <span>更多</span>
                            <span class="iconfont">&#xe6a3;</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="sheet sheet_third flexBox">
                <div class="main">
                    <div class="container">
                        <div class="item flexBox">
                            <div class="img"><img src="./img/app-movie/sheet_round_rec01.png" alt=""></div>
                            <div class="text flexBox">
                                <div class="top">抗美援朝，保家卫国</div>
                                <div class="bottom">
                                    <span>共24部</span>
                                    <span>1110人关注</span>
                                </div>
                            </div>
                        </div>
                        <div class="item flexBox">
                            <div class="img"><img src="./img/app-movie/sheet_round_rec02.png" alt=""></div>
                            <div class="text flexBox">
                                <div class="top">让-吕克·戈达尔主要导演电影</div>
                                <div class="bottom">
                                    <span>共20部</span>
                                    <span>8850人关注</span>
                                </div>
                            </div>
                        </div>
                        <div class="item flexBox">
                            <div class="img"><img src="./img/app-movie/sheet_round_rec03.png" alt=""></div>
                            <div class="text flexBox">
                                <div class="top">她们的影像王国：女性导演作品片单</div>
                                <div class="bottom">
                                    <span>共50部</span>
                                    <span>10860人关注</span>
                                </div>
                            </div>
                        </div>

                        <div class="more">
                            <span>更多</span>
                            <span class="iconfont">&#xe6a3;</span>
                        </div>
                    </div>
                </div>
            </div>

            <section class="suggestion_movie">
                <div class="title">
                    <h1>找电影</h1>
                </div>
                <div class="tagSelectArea">
                    <div class="tagSelect">
                        <div class="filterSort flexBox">
                            <div class="playable">
                                <span class="iconfont">&#xe626;</span>
                                <span class="text">可播放</span>
                            </div>
                            <div class="categories flexBox">
                                <div class="category">
                                    <span class="text">类型</span>
                                    <span class="iconfont">&#xe661;</span>
                                </div>
                                <div class="region">
                                    <span class="text">地区</span>
                                    <span class="iconfont">&#xe661;</span>
                                </div>
                                <div class="sort">
                                    <span class="text">排序</span>
                                    <span class="iconfont">&#xe661;</span>
                                </div>
                            </div>
                            <div class="filter">
                                <span class="iconfont">&#xe619;</span>
                            </div>
                        </div>
                        <div class="tags">
                            <div class="container">
                                <span class="tag">治愈</span>
                                <span class="tag">自由</span>
                                <span class="tag">搞笑</span>
                                <span class="tag">励志</span>
                                <span class="tag">pixar</span>
                                <span class="tag">成长</span>
                                <span class="tag">disney</span>
                                <span class="tag">吉卜力</span>
                                <span class="tag">家庭</span>
                                <span class="tag">人性</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="suggestMovieArea"></div>
            </section>
        </main>
        
        <footer>
            <div class="container flexBox">
                <a href="./index.html" class="item flexBox" id="index" data-index="1">
                    <span class="iconfont" data-index="1"></span>
                    <span class="text" data-index="1">首页</span>
                </a>
                <a href="javascript:void(0);" class="item flexBox current" id="media" data-index="2">
                    <span class="iconfont" data-index="2"></span>
                    <span class="text" data-index="2">书影音</span>
                </a>
                <a href="./app-group.html" class="item flexBox" id="group" data-index="3">
                    <span class="iconfont" data-index="3"></span>
                    <span class="text" data-index="3">小组</span>
                </a>
                <a href="./app-market.html" class="item flexBox" id="market" data-index="4">
                    <span class="iconfont" data-index="4"></span>
                    <span class="text" data-index="4">市集</span>
                </a>
                <a href="./app-user.html" class="item flexBox" id="user" data-index="5">
                    <span class="iconfont" data-index="5"></span>
                    <span class="text" data-index="5">我</span>
                </a>
            </div>
            
            <div class="publish_icon"></div>
        </footer>
    </div>


    <script src="./lib/jquery-3.6.1.min.js"></script>
    <script src="./lib/EasyLazyload.min.js"></script>
    <script src="./lib//swiper-bundle.min.js"></script>
    <script src="./js/app-public.js"></script>
    
    <!-- Initialize Swiper -->
    <script>
        function mySwiperFun(){
           
            var swiper = new Swiper(".stillsSlider", {
                loop:true,
                observer: true, //修改swiper自己或子元素时，自动初始化swiper
                observeParents: true, //修改swiper的父元素时，自动初始化swiper
                pagination: {
                    el: ".dots",
                },
            }); 
        }
        mySwiperFun();
        
    </script>
    <script>
        $(function(){
            // 头部
            // 初始化滑块
            $('.module_switch .afterSlider').width($('.module_switch .current').width()+4);    //设置宽度
            $('.afterSlider').css('left',$('.module_switch .current').get(0).offsetLeft-2);      // 初始位置
            $('.afterSlider').show();
            
            // 点击时 修改文字样式 + 滑块移动
            $('.module_switch').on('click',function(e){
                var index = e.target.dataset.index;
                if(index){
                    var slider_left = e.target.offsetLeft - 2;
                    
                    $(e.target).addClass('current').siblings().removeClass('current');  //修改文字样式
                    $('.module_switch .afterSlider').width($(e.target).width()+4);      //设置宽度
                    $('.module_switch .afterSlider').css('left',slider_left);                  // 初始位置
                }
            })

            
            // 影院热映 豆瓣热门
            // 页面加载完毕 渲染 影院热映的数据
            dataRender('/postMovieCinemaHit');

            //  切换
            $('main section.recommend .hd span').on('click',function(){
                var index = $(this).attr('data-index');
                $(this).addClass('current').siblings().removeClass('current');

                // 根据不同的盒子 进行数据渲染
                if(index == 1){dataRender('/postMovieCinemaHit');}
                if(index == 2){dataRender('/postMovieDouBanHot');}
            })
            


            // 一些小元素
            // 更多 设置高度
            $('.sheet_second .more').height($('.sheet_second .more').siblings().css('height'));
            $('.sheet_third .more').height($('.sheet_third .more').siblings().css('height'));



            // 找电影 发送请求
            $.ajax({
                type:'get',
                url: '/getAllMovie',
                success:function(res){
                    console.log('res',res);

                    // 数据渲染
                    findMovieDataRender(res);
                    
                    // 初始化 Swiper
                    setTimeout(function(){
                        mySwiperFun();
                    },10);

                    // 懒加载
                    lazyLoadAgain();

                    // 无限滚动
                    addMore(res);
                },
                error:function(err){
                    console.log('err',err);
                }
            });




            // 找电影
            $('main section.head .db_movie_find').on('click',function(){
                $(window).scrollTop($('main section.suggestion_movie').offset().top)
                console.log($('main section.suggestion_movie').offset().top)
            })

            // 顶部固定
            $(window).scroll(function(){
                var elTop = $('.tagSelectArea').offset().top;
                var winScr = $(window).scrollTop();

                console.log(elTop,winScr)
                if(elTop - winScr <= 50){
                    $('.tagSelect').addClass('fixed');
                }
                else{
                    $('.tagSelect').removeClass('fixed');
                }
            })

            // 小标签点击
            $('.tagSelect .tags .tag').on('click',function(e){
                $(e.target).addClass('current').siblings().removeClass('current');
            })
        })


        // 影院热映 豆瓣热门 - 数据渲染
        function dataRender(url){

            // 发送请求
            $.ajax({
                type:'post',
                url: url,
                success:function(res){
                    console.log('res',res);

                    var container = '<div class="container">';
                    res.forEach((item,index)=>{
                        var href = 'https://images.weserv.nl/?url=' + item.poster;  //图片路径
                        
                        var spanRatingStarBox = ratingStarCalculate(item.doubanRating)[0];   // 星星容器
                        var hasRating = ratingStarCalculate(item.doubanRating)[1];           // 是否是暂无评分  样式类名

                        var rating_num = item.doubanRating;      // 评分数字 如果是0 则为暂无评分
                        if(item.doubanRating == 0){
                            rating_num = '暂无评分';
                        }
                        
                        var aBox = `<a href="./app-movie-detail.html?doubanId=${item.doubanId}" class="movie_item" data-doubanId="${item.doubanId}">
                                        <div class="hd">
                                            <div class="size_cover">
                                                <div class="img"></div>
                                                <div class="size_cover_background" style="background: url('${href}') center center / cover no-repeat;"></div>
                                            </div>
                                            <span class="iconfont"></span>
                                        </div>
                                        <div class="bd">
                                            <div class="name">${item.originalName}</div>
                                            <div class="rating ${hasRating} flexBox">
                                                ${spanRatingStarBox}
                                                <span class="rating_num">${rating_num}</span>
                                            </div>
                                        </div>
                                    </a>`;
                        container += aBox;
                    })
                    container += '</div>';

                    $('main section.recommend>.bd').html(container);
                    flag = true;

                },
                error:function(err){
                    console.log('err',err);
                }
            })
        }


        // 数据渲染
        function findMovieDataRender(res){
            res.forEach((item,index)=>{
                var doubanId = item.doubanId,
                    posterSrc = item.poster,
                    stills = item.stills.slice().splice(0,4),
                    originalName = item.originalName,
                    rating = item.doubanRating,
                    year = item.year,
                    country = item.country,
                    genres = item.genre,
                    director = item.director[0].data[0].name,
                    actor = item.actor.slice().splice(0,3),
                    writer = item.writer[0],
                    shortComment = item.shortComment;
                    expand = item.expand;

                // 剧照
                var swiper_slide = '';
                stills.forEach((item)=>{
                    swiper_slide += `<div class="swiper-slide">
                                        <img src="https://images.weserv.nl/?url=${item}" alt="${originalName}">
                                    </div>`;
                })

                // 星星 评分
                var spanRatingStarBox = ratingStarCalculate(rating)[0];   // 星星容器
                var hasRating = ratingStarCalculate(rating)[1];           // 是否是暂无评分  样式类名

                var rating_num = rating;      // 评分数字 如果是0 则为暂无评分
                if(rating == 0){rating_num = '暂无评分';}

                // 类型
                var genreSpan = '';
                genres.forEach((item,index)=>{
                    genreSpan += `<span>${item}</span>`;
                })

                // 演员
                var actorSpan = '';
                actor.forEach((item,index)=>{
                    let actor_name = item.data[0].name;
                    actorSpan += `<span>${actor_name}</span>`;
                })

                // 编剧
                var writerSpan = '';
                if(writer != undefined){
                    let writer_name = writer.data[0].name;
                    writerSpan += `<span>${writer_name}</span>`;
                }
                // 扩展标签
                var expandSpan = ``;
                expand.forEach((item)=>{
                    expandSpan += `<span class="tag">${item}<span class="iconfont">&#xe6a3;</span></span>`;
                })
                var movieItem = `<a class="movieItem" href="./app-movie-detail.html?doubanId=${doubanId}">
                                    <div class="top poster_stills flexBox">
                                        <div class="poster">
                                            <img data-lazy-src="https://images.weserv.nl/?url=${posterSrc}" alt="${originalName}">
                                        </div>
                                        <div class="stills">
                                            <div class="swiper stillsSlider">
                                                <div class="swiper-wrapper">
                                                    ${swiper_slide}
                                                </div>
                                                <div class="swiper-pagination dots"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="bottom movie_info">
                                        <div class="simpleInfo flexBox">
                                            <div class="info flexBox">
                                                <div class="movie_name">
                                                    <span class="iconfont">&#xe626;</span>
                                                    <span class="name">${originalName}</span>
                                                    <span class="year">(${year})</span>
                                                </div>
                                                <div class="rating flexBox">
                                                    <span class="rating_stars ${hasRating} small flexBox">
                                                        ${spanRatingStarBox}
                                                    </span>
                                                    <span class="rating_num">${rating_num}</span>
                                                </div>
                                                <div class="basicInfoArea">
                                                    <span class="year">${year}</span>
                                                    / 
                                                    <span class="country">${country}</span>
                                                    / 
                                                    <span class="genre">${genreSpan}</span>
                                                    / 
                                                    <span class="director">${director}</span>
                                                    / 
                                                    <span class="actor">${actorSpan}</span>
                                                    / 
                                                    <span class="writer">${writerSpan}</span>
                                                </div>
                                            </div>
                                            <div class="want_to_see flexBox">
                                                <span class="iconfont"></span>
                                                <span class="text">想看</span>
                                            </div>
                                        </div>
                                        <div class="shortComments">
                                            ${shortComment.content} <span class="author">—&nbsp;${shortComment.author}</span>
                                        </div>
                                        <div class="expandArea">${expandSpan}</div>
                                    </div>
                                </a>`;
            
                $('section.suggestion_movie .suggestMovieArea').append(movieItem);

            })
        }

        // 无限滚动
        function addMore(res){
            $(window).scroll(function(){
                var mainHei = $('main').height();
                var winHei = $(window).height();
                var winScr = $(window).scrollTop();

                var liBoxNum = $('li.recommend ul li').length;
                var liBox_maxNum = 20;
                
                // 一个一个追加，最大长度为20
                if($('li.recommend ul li').length < liBox_maxNum && winScr >= mainHei - winHei){
                    // 随机抽取
                    var random = Math.floor(Math.random() * (res.length-0)+0);

                    // 追加新内容
                    findMovieDataRender([res[random]]);
                }
            })
        }
    </script>
</body>
</html>